<template>
    <div class="app-container">
        <div class="left">
            <el-input v-model="input2" class="w-50 m-2" placeholder="请输入部门名称" :prefix-icon="Search" />
        </div>
        <div class="right">
            <el-table ref="multipleTableRef" :data="userlist" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column label="用户编号" prop="userId">
                </el-table-column>
                <el-table-column label="用户名称" prop="userName" />
                <el-table-column label="用户昵称" prop="nickName" />
                <el-table-column label="部门" prop="dept.deptName" />
                <el-table-column label="手机号码" prop="phonenumber" />
                <el-table-column label="状态" prop="admin">
                    <template #default="{ row }">
                        <el-switch v-model="row.admin" />
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="createTime" />
                <el-table-column label="操作" />
            </el-table>
        </div>
    </div>
</template>
<script setup lang='ts'>
import { ref, reactive } from 'vue';
import { Search } from '@element-plus/icons-vue'
import { getUserList } from "./api/index"

const input2 = ref('')
const multipleSelection = ref<User[]>([])
const userlist = ref<User[]>([])
interface User {
    date: string
    name: string
    address: string
}

const queryParams = reactive<IUserListParams>({
    pageNum: 1,
    pageSize: 10,
});

const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}

const getuserlist = () => {
    getUserList(queryParams).then((res) => {
        if (res.code === 200) {
            userlist.value = res.rows
            console.log(res, '888888')
        }
    });
};
getuserlist()


</script>
<style lang="less" scoped>
.app-container {
    width: 100%;

    .left {
        width: 40%;
    }

    .right {
        :deep(.el-table__cell) {
            text-align: center;
        }
    }
}
</style>